﻿

<style>
	/*.col-md-10 {*/
	/*	flex: 0 0 70.333333%;*/
	/*	max-width: 70.333333%;*/
	/*}*/

	/*.col-md-2 {*/
	/*	flex: 0 0 25.666667%;*/
	/*	max-width: 25.666667%;*/
	/*}*/
</style>

<div class="row">
	<div class="colxl-12 col-lg-12 col-md-12 col-sm-12 col-12">
		<div class="add-group">
			<a class="ad-btn" data-toggle="modal" data-target="#exampleModalLong" @click="openAdd">添加</a>
		</div>
	</div>
</div>


<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<span class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLongTitle" >{{modalTitle}}</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form>
					<span class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >地区名称：</label>
							<div class="col-md-10">
								<input class="form-control" type="text" v-model="area.name" placeholder="请输入地区">
							</div>
						</div>
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >关联项目：</label>
							<div class="col-md-10">
									<div class="checkbox" v-for="(pro,index) in projectList" style="display: inline;">
											<input :id="'checkbox'+index" type="checkbox"
												   @click="checkVal(pro,$event)">
											<label :for="'checkbox'+index">{{pro.name}}</label>
											&nbsp;&nbsp;&nbsp;&nbsp;
									</div>
							</div>
						</div>
					</span>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" @click="saveOrUpdate()">保存</button>
				<button type="button" id="closeModal" class="btn btn-secondary" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>


                <!-- Products view Start -->
				<div class="row">
                    <!-- Styled Table Card-->
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="card table-card">
                            <div class="card-body">
                               <table id="example" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
									<thead style="font-size:25px">
										<tr align="center">
											<th>序号</th>
											<th>地区名称</th>
											<th>关联项目</th>
											<th>状态</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="(area,index) in areaList" align="center">
											<td style="font-size:25px">{{index+1}}</td>
											<td style="font-size:25px">{{area.name}}</td>
											<td style="font-size:25px">{{area.projectList | filterProject}}</td>
											<td style="font-size:25px;color: blue;" v-if="area.status==1">开启中</td>
											<td style="font-size:25px;color: red;" v-if="area.status==2">停用中</td>
											<td>
												<div style="width:200px">
													<button type="button" class="btn btn-success mt-2 mr-2"
															@click="openEdit(area.id)"
															data-toggle="modal" data-target="#exampleModalLong"
														>修改</button>
													<button type="button" class="btn btn-danger mt-2 mr-2"
															v-if="area.status==1"
															@click="updateStatus(area.id,'2')">停用</button>
													<button type="button" class="btn btn-success mt-2 mr-2"
															v-if="area.status==2"
															@click="updateStatus(area.id,'1')">开启</button>
												</div>
											</td>
										</tr>
									</tbody>
								</table>
                            </div>
                        </div>
                    </div>
                </div>

<script>

	new Vue({
		el:"#app",
		data:{
			areaList:[],
			projectList:[],
			projectCheck:false,
			projectCheckList:[],
			modalTitle: '',
			area: {'id':'','name':''}
		},
		created:function (){
			this.selectList()
		},
		computed: {
			pro: {
				// getter，用于显示数据
				get() {
					for (let i = 0; i < this.projectList.length; i++) {
						let project = this.projectList[i]
						if(this.area.projectList.indexOf(project)){
							return true;
						}
					}
				},
				// setter，用于输入数据变化时更新数据
				set(newValue) {

				}
			}
		},

		methods:{
			selectList:function () {
				axios.get(
						"/admin/area/getList"
				).then(response=>{
					this.areaList = response.data
				})
			},
			openEdit:function(id){
				this.modalTitle = "修改"
				this.area = {}
				axios.get(
						"/admin/area/findById/"+id,
				).then(response=>{
					this.area = response.data
					this.selectProject()
				})
			},
			selectProject:function (){
				this.projectList = []
				this.projectCheckList = []
				axios.get(
						"/admin/project/selectListAll"
				).then(response=>{
					this.projectList = response.data
					setTimeout(() => {
						this.editCheck()
					}, 300)
				})
			},
			openAdd:function(){
				this.modalTitle = "添加"
				this.area = {}
				this.selectProject()
			},
			saveOrUpdate:function (){
				this.area.projectList = JSON.stringify(this.projectCheckList)
				axios.post("/admin/area/saveOrUpdate",this.area).then(response=>{
					$("#closeModal").click()
					this.selectList()
				})
			},
			updateStatus:function (id,status){
				axios.get("/admin/area/updateStatus/"+id+"/"+status).then(response=>{
					this.selectList()
				})
			},
			checkVal:function (pro,obj){
				if(obj.target.checked){
					this.projectCheckList.push(pro)
				}else{
					for (let i = 0; i < this.projectCheckList.length; i++) {
						if(this.projectCheckList[i].id == pro.id){
							this.projectCheckList.splice(i,1)
						}
					}
				}
			},
			editCheck:function (){
				if(this.area.projectList==undefined){
					return;
				}
				let proArray = JSON.parse(this.area.projectList)
				this.projectCheckList = proArray
				for (let i = 0; i < proArray.length; i++) {
					for (let j = 0; j < this.projectList.length; j++) {
						if(proArray[i].name==this.projectList[j].name){
							let idstr = "#checkbox"+j
							$(idstr).prop("checked",true)
						}
					}
				}
			}
		},
		filters:{
			filterProject (proList){
				if(proList==''){
					return;
				}
				let proArray = JSON.parse(proList)
				let pro = ''
				if(proArray.length>3){
					for (let i = 0; i < 3; i++) {
						pro += proArray[i].name + '，'
					}
					pro = pro.substring(0,pro.length-1) + "······"
				}else{
					for (let i = 0; i < proArray.length; i++) {
						pro += proArray[i].name + '，'
					}
					pro = pro.substring(0,pro.length-1)
				}
				return pro;
			},
			testV(val){
				// console.log(that.area)
				// if(that.area=={}){
				// 	return;
				// }
				// if(that.area.projectList==''){
				// 	return;
				// }
				// if(that.area.projectList.indexOf(val)){
				// 	return checked;
				// }
			}
		}
	});

	// function checkVal(pro,obj){
	// 	console.log("===================")
	// 	// if(obj.target.checked){
	// 	// 	this.projectCheckList.push(pro)
	// 	// }else{
	// 	// 	let index = this.projectCheckList.indexOf(pro)
	// 	// 	this.projectCheckList.splice(index,1)
	// 	// }
	// }

</script>

